<template>
	<view class="h-100v flex flex-column">
		<view class="bg">
			<!-- header -->
			<view class="all-header">
				<view :style="{height:statusBarHeight}" class="bg"></view>
				<view class="h-44p flex justify-between items-center bg px-10" @click="type?type=0:type=1">
					<text class="iconfont icon-arrow-left" style="font-size: 24px;" @click="goBack"></text>
					<text class="text-17">{{type?'统计':'账单'}}<text class="iconfont icon-arrow-down ml-4"></text></text>
					<text class="iconfont icon-arrow-right invisible" style="font-size: 24px;"></text>
				</view>
			</view>
			
			<view class="flex justify-between px-24 pt-24 pb-12">
				<text :class="{'invisible':type}" @click="handlePickerShow">{{datePickerValue}}年<text class="iconfont icon-arrow-down"></text></text>
				<view class="flex flex-column items-center">
					<text class="txt mb-10">结余</text>
					<text v-show="topNum.surplus!==0" class="num" v-html="topNum.surplus"></text>
					<text v-show="topNum.surplus==0" class="num">0.<text class="text-18">00</text></text>
				</view>
				<text class="invisible">2024年<text class="iconfont icon-arrow-down"></text></text>
			</view>
			<view class="flex px-24 pb-24">
				<text class="basis-1/2 text-center txt">收入&nbsp;&nbsp;
				<text v-show="topNum.in!==0" class="num" v-html="topNum.in"></text>
				<text v-show="topNum.in==0" class="num">0.<text class="text-18">00</text></text>
				</text>
				<text class="basis-1/2 text-center txt">支出&nbsp;&nbsp;
				<text v-show="topNum.pay!==0" class="num" v-html="topNum.pay"></text>
				<text v-show="topNum.pay==0" class="num">0.<text class="text-18">00</text></text>
				</text>
			</view>
		</view>
		<view class="flex-auto flex flex-column">
			<view style="overflow: auto;">
				<view class="flex justify-between mb-10 px-24 py-10" style="border-bottom: 1px solid #ddd;">
					<text class="basis-1/4 text-center">{{type?'年份':'月份'}}</text>
					<text class="basis-1/4 text-center">收入</text>
					<text class="basis-1/4 text-center">支出</text>
					<text class="basis-1/4 text-center">结余</text>
				</view>
				<scroll-view scroll-y="true">
					<view class="flex justify-between px-24 py-12" style="border-bottom: 1px solid #ddd;color: #666;" v-for="(item,index) in list" :key="index">
						<text class="basis-1/4 text-center">{{type?item.year:item.mon}}</text>
						<text class="basis-1/4 text-center">{{formatNum(item.in)}}</text>
						<text class="basis-1/4 text-center">{{formatNum(item.pay)}}</text>
						<text class="basis-1/4 text-center">{{formatNum(item.in - item.pay)}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<DaDatetimePicker
		    :visible="showDatePicker"
		    :value="datePickerValue"
			:format="[1,0,0,0,0,0]"
			:years="years"
		    @confirm="handleConfirm"
		    @cancel="handleCancel"></DaDatetimePicker>
	</view>
</template>

<script>
	import {getAllAccounts,getAllYear,getTotalAccounts} from '@/api/api.js';
	import DaDatetimePicker from '@/components/da-datetime-picker/index.vue';	
	import {fmtNum,formatMoney} from '@/common/format.js';
	export default {
		data() {
			return {
				type:0,
				showDatePicker :false,
				datePickerValue :null,
				list:[],
				years:[],
				allAccounts:[],
				totalAccounts:[]
			}
		},
		computed:{
			statusBarHeight() {
				return (uni.getSystemInfoSync()).statusBarHeight +'px'
			},
			now() {
				const date = new Date()
				const year = date.getFullYear()
				return `${year}`
			},
			topNum() {
				const html={}
				let in_num=0,pay_num=0,surplus_num=0;
				for (let item of this.list) {
					in_num += item.in;
					pay_num += item.pay;
					surplus_num = in_num - pay_num
				}
				return {
					in:in_num==0?0:fmtNum(in_num,18),
					pay:pay_num==0?0:fmtNum(pay_num,18),
					surplus:surplus_num==0?0:fmtNum(surplus_num,18)
				}
			}
		},
		watch:{
			type(val) {
				this.list = val?this.totalAccounts:this.allAccounts
			}
		},
		components:{DaDatetimePicker},
		async onLoad() {
			const yearsArr = await getAllYear()
			this.years = [yearsArr[0],yearsArr[yearsArr.length-1]]
			this.datePickerValue = this.now
			await this.getData()
		},
		methods: {
			async getData() {
				this.allAccounts = await getAllAccounts(this.datePickerValue)
				this.totalAccounts = await getTotalAccounts()
				this.list = this.allAccounts
			},
			handlePickerShow() {
			  this.showDatePicker = true
			  console.log('handlePickerShow ==>')
			},
			async handleConfirm(v) {
			  this.datePickerValue = v
			  this.showDatePicker = false
			  await this.getData()
			  console.log('handleConfirm ==>', v)
			},
			handleCancel() {
			  this.showDatePicker = false
			  console.log('handleCancel ==>')
			},
			formatNum(num) {
				// if(num>=10000) {
				// 	return (num/10000).toFixed(2)+'万'
				// }
				return formatMoney(num)
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	text.txt {
		color: #666;
	}
	text.num {
		font-size: 24px;
		color: #333;
	}
</style>
